<template>
	<view class="">
		<view class="he1 w100pc"></view>
		<!-- 头部 -->
		<view class="fsb lrmg-30" style="height: 100rpx;">
			<image src="/static/image/9.png" style="width:86rpx;height:50rpx" class="" @click="pageback()"></image>
			<view class="flex aic">
			</view>
		</view>
		<view class="he3 w100pc"></view>
		<view class="lrmg-30">
			<view class="gray272 weight f30">产品列表</view>
			<view class="he3 w100pc"></view>
			<view class="mg-b-30 ddles" v-for="(it,i) in kjList" :key="i" @tap="goumais(it)">
				<view class="flex aic w100pc mg-b-20" style="padding-bottom: 20rpx;border-bottom: 1rpx solid rgba(255,255,255,0.2);">
					<image :src="getRequestUrl + it.pic" mode="aspectFill" style="width:150rpx;height:150rpx" class="bra20"></image>
					<view class="mg-l-30 fdc jsb" style="height: 140rpx;">
						<view class="flex aic">
							<view class="gray272 weight f30">{{it.label}}{{it.name}}</view>
							<!-- <view class="coin">在线</view> -->
						</view>
						<view class="flex aic">
							<view class="f24 gray272">
								<view class="flex aic">
									<view class="">算力：</view>
									<view class="" style="color: #31B898;">{{it.total_num}} G</view>
								</view>
								<view class="flex aic mg-t-30">
									<view class="">价格：</view>
									<view class="" style="color: #F29423;">{{it.money}} {{it.currency == 1 ? 'USDT' : 'MMST'}}</view>
								</view>
							</view>
							<view class="f24 gray272 mg-l-30">
								<view class="flex aic">
									<view class="">库存：</view>
									<view class="" style="color: #31B898;">{{Number(it.max_possess) - Number(it.possess)}}</view>
								</view>
								<view class="flex aic mg-t-30">
									<view class="">有效期：</view>
									<view class="" style="color: #F29423;">{{it.duration}}天</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="fsb">
					<view class="flex aic">
						<image src="../../static/image/23.png" style="width:32rpx;height:32rpx;margin-top: 5rpx;" class=""></image>
						<view class="gray272s f20 mg-l-10">设备编号:{{it.equipment}}</view>
					</view>
					<view class="flex aic">
						<image src="../../static/image/24.png" style="width:32rpx;height:32rpx;margin-top: 5rpx;" class=""></image>
						<view class="gray272s f20 mg-l-10">芯片代码:{{it.chip}}</view>
					</view>
				</view>
				<view class="flex jc-end mg-t-30">
					<view class="fff bra10" style="padding: 15rpx 40rpx;background: #31B898;">购买</view>
				</view>
			</view>
		</view>
		<view class="he3 w100pc"></view>
		
		<u-popup v-model="showtab" mode="bottom" :mask-close-able="true" :border-radius="20">
			<view style="background: #1B1B1B;">
				<view class="" style="padding: 50rpx;">
					<view class="flex aic">						
						<image :src="getRequestUrl + obj_item.pic" style="width:97rpx;height:97rpx" class=""></image>
						<view class="gray272 f40 weight mg-l-40">{{obj_item.label}}{{obj_item.name}}</view>					
					</view>
					<view class="mg-t-40 pd-b-30 fsb" style="border-bottom: 1rpx solid rgba(255, 255, 255, .2);">
						<view class="gray272 f40">{{obj_item.price}} </view>
						<view class="f30" style="color: #fff;">{{obj_item.currency == 1 ? 'USDT' : 'MMST'}}</view>
					</view>
					<view class="mg-t-40 fsb f26">
						<view class="gray272">算力：{{obj_item.total_num}}G</view>
						<view class="gray272">庫存：{{Number(obj_item.max_possess) - Number(obj_item.possess)}}</view>
						<view class="gray272">有效期：{{obj_item.duration}}天</view>
					</view>
					<view class="mg-t-40 flex jc-end">
						<u-number-box v-model="value" :min="1" @change="valChange"></u-number-box>
					</view>
					<view class="fsb mg-t-40">
						<view class="" style="color: #fff;">支付方式</view>
						<view class="flex aic" style="color: #fff;">
							<view class="mg-r-10 yuan"></view>
							<view class="mg-r-10">{{obj_item.currency == 1 ? 'USDT' : 'MMST'}}</view>
							<!-- <u-icon name="arrow-right" size="18" color="#333333"></u-icon> -->
						</view>
					</view>
					<view class="f24 grayc4 mg-t-20" style="text-align: right;">余额：{{obj_item.currency == 1 ? userInfo.usdt + ' USDT' : userInfo.lcc + ' MMST'}}</view>
					<view class="w100pc" style="height: 60rpx;"></view>					
					<u-button type="primary" :ripple="true" :custom-style="customStyle" @click="submit">购买</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var	that
	import {
		_updataTabBar,
		pageto,
		pageback
	} from "../../common/js/sysfun.js"
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default{
		data(){
			return{
				customStyle: {
					color: '#FFFFFF',
					background:'#31B898',
					width:'670rpx',
					fontWeight:'bold',
					fontSize:'30rpx',
					height:'100rpx'
				},
				kjList:[],
				showtab:false,
				obj_item:{},
				userInfo:{},
				value: 1,
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				'getLangType',
				'getTextArr',
				'getLoginInfo'
			])
		},
		onLoad() {
			that = this
			that.getList()
			that.getUser()
		},
		methods:{
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			goumais(it){
				that.showtab = !that.showtab
				that.obj_item = it
			},
			submit(){
				console.log(that.value);
				if(that.obj_item.currency == 1){//usdt
					if(Number(that.userInfo.usdt) - (Number(that.value) * Number(that.obj_item.price)) < 0){
						uni.showToast({
							title: 'USDT余额不足',
							icon: 'none'
						});
						return
					}
				}else{//lcc
					if(Number(that.userInfo.lcc) - (Number(that.value) * Number(that.obj_item.price)) < 0){
						uni.showToast({
							title: 'MMST余额不足',
							icon: 'none'
						});
						return
					}
				}
				if(Number(that.obj_item.max_possess) - Number(that.obj_item.possess) <=0){
					uni.showToast({
						title: '庫存不足',
						icon: 'none'
					});
					return
				}
				uni.showLoading({
					mask: true
				});
				let data = {
					id:that.obj_item.id,
					num:that.value,
				}
				that.$postAjax('api/mining/pay_mining',data,function(res){
					uni.hideLoading()
					uni.showToast({
						title: '成功',
						icon: 'none'
					});
					setTimeout(function(){
						that.showtab = false
						that.getList()
						that.getUser()
						that.value = 1
					},500)
				})
			},
			getList(){
				let temp = {
					page:1,//第几页（默认第一页）
					limit:100,//显示条数（默认10条）
				}
				that.$postAjax('api/Mining/getList',temp,function(res){
					console.log(res);
					// console.log(that.getRequestUrl + res.data.class.pic);
					that.kjList = res.data
				})
			},
			getUser(){
				uni.showLoading({
					mask: true
				});
				that.$postAjax('api/Member/wallet','',function(res){
					console.log(res,'getUser');
					uni.hideLoading()
					that.userInfo = res.data
				})
			},
			pageto(url, pp) {
				pageto(url, pp);
			},
			pageback(){
				pageback()
			}
		}
	}
</script>

<style lang="scss">
	.ddles{
		box-shadow: inset 0px 0px 12rpx 1rpx rgba(255,255,255,0.25);
		border-radius: 20rpx;
		padding: 30rpx;
		margin: 0 0 30rpx;
		background: rgba(26, 26, 26, .9);
		.coin{
			padding: 8rpx 15rpx;
			font-size: 20rpx;
			background:#31B898 ;
			color: #fff;
			margin-left: 20rpx;
			border-radius: 60rpx;
		}
	}
	.middle{
		background: #FFFFFF;
		box-shadow: 0px 0px 31rpx 1rpx rgba(15,6,10,0.13);
		border-radius: 20rpx;
		padding: 50rpx 20rpx;
	}
	.btn1{
		position: absolute;
		left: 0;
		top: 0;
		padding: 15rpx 50rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #fff;
		border-radius: 20rpx 0 20rpx 0;
	}
	.bg1{background: #FEC94F;}
	.bg2{background: #18376F;}
	.bg3{background: #FF6D33;}
</style>